<template>
    <div class="match_dialogs">
        <div class="match_dialogs_header">
            <div class="text1">{{ medata[0].monitoring_name }}</div>
            <div class="text2">当前监控器有【 {{ medata[0].monitoring_pop_list.length }} 个新比赛】</div>
            <div class="colose">
                <img src="@/assets/monitor/del.png" style="width: 24px;height: 24px;cursor: pointer;" alt="" @click="removefun()">
            </div>
        </div>
        <div class="match_dialogs_content">
            <div class="item" v-for="(item, index) in list.data" :key="index">
                <div class="num">{{ index + 1 }}</div>
                <div class="label">
                    <div class="league">{{ item.minfo.league_name }}</div>【
                    <div class="home">{{ item.minfo.home_name }}</div>
                    <img src="@/assets/monitor/vs.png" style="width: 14px;height: 18px;margin: 0 8px" alt="">
                    <div class="away">{{ item.minfo.away_name }}</div>】
                </div>
            </div>
            <div class="item" v-if="list.show">
                <div class="label">... ...</div>
            </div>
        </div>

    </div>
</template>

<script setup>
const props = defineProps({
    medata: Array
});
const emit = defineEmits([])
const list = computed(() => {
    let a = {
        show: false,
        data: []
    }
    if (props.medata[0].monitoring_pop_list.length > 3) {
        a.show = true
        a.data = props.medata[0].monitoring_pop_list.splice(3)
    } else {
        a.show = false
        a.data = props.medata[0].monitoring_pop_list
    }
    return a
})

const removefun = () => {
    emit('remove');
}
onMounted(() => {
    setTimeout(() => {
        removefun()
    }, 5000);

})
</script>

<style lang="scss" scoped>
.match_dialogs {
    width: 600px;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
    background-color: #fff;
    position: fixed;
    z-index: 999999;
    bottom: 60px;
    left: calc(50% - 300px);
    
}

.match_dialogs_header {
    width: 100%;
    height: 96px;
    background-image: url('@/assets/monitor/tanchuang.png');
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .text1 {
        font-size: 18px;
        font-weight: bold;
        color: #000;
    }

    .text2 {
        margin-top: 10px;
        padding: 2px 17px;
        border-radius: 16px;
        background-image: linear-gradient(to right, #d0eeff, #fcd4d0);
        font-size: 14px;
        text-align: center;
        color: #000;

    }
}

.colose {
    position: absolute;
    top: 12px;
    right: 12px;
    cursor: pointer;
}

.match_dialogs_content {
    // height: 110px;
    padding: 0 24px 32px 24px;
    display: flex;
    flex-direction: column;

    .item {
        margin-top: 16px;
        display: flex;

        .num {
            width: 40px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: bold;
            color: #000;
        }

        .label {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;

            .league {
                font-size: 16px;
                color: #000;
                max-width: 300px;

            }

            .home {
                font-size: 16px;
                color: #e92937;
            }

            .away {
                font-size: 16px;
                color: #0071ff;
            }
        }
    }
}
</style>